<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JarManage</title>
    <script src="js/load.js"></script>
    <link rel="shortcut icon" href="images/favicon.png">
    <style>
        .layui-card-header {
            background-color: #eee !important;
        }

        .layui-card {
            border: 1px solid #eee !important;
        }

        .opbody {
            display: flex;
            flex-direction: column;
        }

        .optitle {
            width: 100px;
            text-align: center;
        }

        .optitle {
            width: 100px;
            text-align: center;
        }

        .oprow {
            display: flex;
            flex-direction: row;
            height: 40px;
            align-items: center;
        }

        .frame {
            width: 100%;
            margin: 0;
            border: none;
            vertical-align: bottom;
            height: calc(100%);
        }

        .layui-nav-tree .layui-nav-item {
            display: flex !important;
            flex-direction: row !important;
            align-items: center;
            justify-content: center;
        }

        .menu-title {
            width: 80px;
        }

        .menu-icon {
            font-size: 16px;
        }

        .layui-tab {
            margin: 0 !important;
            width: 100%;
        }

        .layui-tab-content {
            padding: 0 !important;
            height: calc(100% - 41px);
        }

        .layui-tab-item {
            height: 100% !important;
        }

        .layui-tab-title .layui-this {
            color: #fff !important;
            background-color: #009688 !important;
        }

        .nav-slected {
            color: #fff !important;
            background-color: #009688 !important;
        }

    </style>
</head>

<body>
<div class="layui-fluid" style="padding: 0;height: 100%;width: 100%">
    <div class="flexrow">
        <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="menu" id="view">

        </ul>
        <div class="layui-tab" lay-filter="maintab" lay-allowClose="true">
            <ul class="layui-tab-title">

            </ul>
            <div class="layui-tab-content">

            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="project">
    {{#  layui.each(d, function(index, item){ }}
    <li class="layui-nav-item" id="menu_{{item.tag}}">
        <i class="layui-icon {{item.icon}} menu-icon"></i>
        <a class="menu-title" href="#" onclick="ChangeFrame('{{item.tag}}','{{item.name}}','{{item.url}}')">{{item.name}}</a>
    </li>
    {{#  }); }}
</script>

<script>
    var openMenuList = [];
    var tabList = [];
    $(function () {
       loadMenu();
    })

    function ChangeFrame(tag, name, url) {
        var element = layui.element;
        url = GetRootPath() + url;
        if (tabList.indexOf(tag) < 0) {
            tabList.push(tag);
            element.tabAdd('maintab', {
                title: name
                , content: " <iframe id='tag' src='" + url + "' class='frame'></iframe>"
                , id: tag
            })
        }
        element.tabChange('maintab', tag);
        $(".layui-nav-item").removeClass("nav-slected")
        $("#menu_" + tag).addClass("nav-slected")
        element.on('tabDelete(maintab)', function (data) {
            tabList.splice(data.index, 1);
        });
        element.on('tab(maintab)', function (data) {
            $(".layui-nav-item").removeClass("nav-slected")
            $("#menu_" + tabList[data.index]).addClass("nav-slected")
        });
        layui.element.render();
    }

    function loadMenu(){
       openMenuList = [];
       var defaultMenuList = [
         {"tag":"Machine","name":"服务器监控","url":"pages/machine/machineinfo.html","icon":"layui-icon-windows"},
         {"tag":"JarManage","name":"Jar包部署","url":"pages/depoly/project_list.html","icon":"layui-icon-website"},
         {"tag":"WarManage","name":"War包部署","url":"pages/war/war_list.html","icon":"layui-icon-website"},
         {"tag":"MySQL","name":"MySQL管理","url":"pages/plugin/adminer.php","icon":"layui-icon-set-fill"},
         {"tag":"Redis","name":"Redis管理","url":"pages/redis/redis_manage.html","icon":"layui-icon-template-1"},
         {"tag":"Nginx","name":"Nginx管理","url":"pages/nginx/nginxmanage.html","icon":"layui-icon-link"},
         {"tag":"File","name":"文件管理","url":"pages/plugin/filemanage.php","icon":"layui-icon-file-b"},
         {"tag":"StaticDepoly","name":"静态部署","url":"pages/plugin/staticdepoly.php","icon":"layui-icon-app"},
         {"tag":"DynamicProxy","name":"动态代理","url":"pages/proxy/proxy_list.html","icon":"layui-icon-release"},
         {"tag":"FireWall","name":"防火墙管理","url": "pages/firewall/firewall_list.html","icon":"layui-icon-group"},
         {"tag":"Service","name":"服务管理","url":"pages/service/service_list.html","icon":"layui-icon-set"}
       ]
       var param = {

       }
       HttpPost(JSON.stringify(param), 'api/config/system', function (result) {
          if (result.code == 0) {
             var version = result.data.version;
             document.title = "JarManage-"+version;
             var menuList = result.data.menuList;
             for(var i=0;i<defaultMenuList.length;i++){
                var menu = defaultMenuList[i];
                if(menuList.indexOf(menu.tag)>=0){
                    openMenuList.push(menu)
                }
             }
             var laytpl = layui.laytpl;
             var getTpl = project.innerHTML;
             var view = document.getElementById('view');
             laytpl(getTpl).render(openMenuList, function(html){
                 view.innerHTML = html;
             });
             layui.element.render();
             if(openMenuList.length>0){
                var menu = openMenuList[0];
                ChangeFrame(menu.tag,menu.name,menu.url)
             }
          } else {
             OpenFail(result.msg);
          }
       })
    }

</script>